<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { 
  NCard, NInput, NButton, NSpace, NList, NListItem, NImage, NProgress, 
  NTag, NEmpty, NSpin, useMessage, NIcon, NH3, NText, NGradientText, NAlert, NPagination,
  NDrawer, NDrawerContent, NInputNumber, NSwitch, NDivider
} from 'naive-ui';
import { CloudDownloadOutline, PlayOutline, TimeOutline, FolderOpenOutline, SettingsOutline, PauseOutline, PlayCircleOutline } from '@vicons/ionicons5';

const message = useMessage();
const videoUrl = ref("");
const videos = ref([]);
const loading = ref(false);
const downloadProgress = reactive({});
const downloadPath = ref("");
const downloadedFiles = reactive({});
const selectedVideos = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const showSettings = ref(false);
const maxThreads = ref(3);
const isPaused = ref(false);
const isDownloading = ref(false);
const nextDownloadIndex = ref(0);

// 计算当前页显示的视频
const paginatedVideos = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return videos.value.slice(start, end);
});

// 获取下载路径
onMounted(async () => {
  try {
    downloadPath.value = await invoke("get_download_path");
  } catch (error) {
    console.error("获取下载路径失败:", error);
  }
});

// 选择下载路径
async function selectDownloadPath() {
  try {
    const path = await invoke("select_download_folder");
    if (path) {
      downloadPath.value = path;
      message.success('已更新下载路径');
    }
  } catch (error) {
    message.error(`选择路径失败: ${error}`);
  }
}

// 打开下载文件夹
async function openDownloadFolder() {
  try {
    await invoke("open_download_folder");
  } catch (error) {
    message.error(`打开文件夹失败: ${error}`);
  }
}

// 批量下载
async function batchDownload() {
  if (videos.value.length === 0) {
    message.warning('没有可下载的视频');
    return;
  }
  
  if (isDownloading.value) {
    message.warning('已有下载任务在进行中');
    return;
  }
  
  // 如果是继续下载，从上次位置开始，否则从头开始
  if (!isPaused.value) {
    nextDownloadIndex.value = 0;
  }
  
  isPaused.value = false;
  isDownloading.value = true;
  
  const collectionTitle = videos.value[0].collection_title || '未命名合集';
  message.info(`开始批量下载到文件夹: ${collectionTitle}`);
  message.info(`使用 ${maxThreads.value} 线程并发下载`);
  
  await performBatchDownload();
}

// 执行批量下载
async function performBatchDownload() {
  const threads = maxThreads.value;
  let completed = Object.keys(downloadProgress).filter(k => downloadProgress[k] === 100).length;
  
  for (let i = nextDownloadIndex.value; i < videos.value.length; i += threads) {
    // 每批次下载前检查暂停状态
    if (isPaused.value) {
      nextDownloadIndex.value = i;
      message.warning(`下载已暂停（已完成 ${completed}/${videos.value.length}）`);
      isDownloading.value = false;
      return;
    }
    
    const batch = [];
    for (let j = 0; j < threads && i + j < videos.value.length; j++) {
      const index = i + j;
      // 跳过已下载的
      if (downloadProgress[index] === 100) {
        completed++;
        continue;
      }
      batch.push(
        downloadVideo(videos.value[index], index).then((success) => {
          if (success) {
            completed++;
          }
        })
      );
    }
    
    if (batch.length > 0) {
      await Promise.all(batch);
    }
    
    // 批次完成后再次检查暂停状态
    if (isPaused.value) {
      nextDownloadIndex.value = i + threads;
      message.warning(`下载已暂停（已完成 ${completed}/${videos.value.length}）`);
      isDownloading.value = false;
      return;
    }
  }
  
  if (!isPaused.value) {
    message.success(`批量下载完成！已下载 ${completed} 个视频`);
    nextDownloadIndex.value = 0;
    isDownloading.value = false;
  }
}

// 暂停/继续下载
async function togglePause() {
  if (!isDownloading.value && isPaused.value) {
    // 继续下载
    isPaused.value = false;
    isDownloading.value = true;
    message.info('继续下载...');
    await performBatchDownload();
  } else {
    // 暂停下载
    isPaused.value = !isPaused.value;
    if (isPaused.value) {
      message.warning('正在暂停下载...');
    }
  }
}

// 解析视频信息
async function parseVideo() {
  if (!videoUrl.value.trim()) {
    message.warning('请输入B站视频链接');
    return;
  }
  
  loading.value = true;
  try {
    const result = await invoke("parse_bilibili_video", { url: videoUrl.value });
    videos.value = result;
    currentPage.value = 1; // 重置到第一页
    message.success('视频解析成功！');
  } catch (error) {
    message.error(`解析失败: ${error}`);
    console.error(error);
  } finally {
    loading.value = false;
  }
}

// 下载视频
async function downloadVideo(video, index) {
  // 下载前检查暂停状态
  if (isPaused.value) {
    return false; // 返回 false 表示未下载
  }
  
  try {
    downloadProgress[index] = 0;
    
    const filePath = await invoke("download_video", { 
      videoInfo: video
    });
    
    // 下载完成后再次检查暂停状态
    if (isPaused.value) {
      delete downloadProgress[index]; // 清除进度
      return false;
    }
    
    downloadProgress[index] = 100;
    downloadedFiles[index] = filePath;
    return true; // 返回 true 表示成功下载
  } catch (error) {
    if (!isPaused.value) {
      message.error(`${video.title} 下载失败: ${error}`);
    }
    console.error(error);
    return false;
  }
}

// 格式化时长
function formatDuration(seconds) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  
  if (h > 0) {
    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  }
  return `${m}:${s.toString().padStart(2, '0')}`;
}
</script>

<template>
  <div class="app-container">
    <!-- 设置按钮 -->
    <div class="settings-button">
      <NButton circle size="large" @click="showSettings = true">
        <template #icon>
          <NIcon :size="24">
            <SettingsOutline />
          </NIcon>
        </template>
      </NButton>
    </div>
    
    <!-- 设置抽屉 -->
    <NDrawer v-model:show="showSettings" :width="400" placement="left">
      <NDrawerContent title="设置" closable>
        <NSpace vertical :size="24">
          <div>
            <NText strong style="font-size: 16px;">下载设置</NText>
            <NDivider style="margin: 12px 0;" />
            
            <div style="margin-bottom: 20px;">
              <NText>最大并发下载数</NText>
              <NInputNumber 
                v-model:value="maxThreads" 
                :min="1" 
                :max="10" 
                style="width: 100%; margin-top: 8px;"
              />
              <NText depth="3" style="font-size: 12px; margin-top: 4px; display: block;">
                同时下载的最大视频数量（建议1-5）
              </NText>
            </div>
            
            <div style="margin-bottom: 20px;">
              <NText>下载保存路径</NText>
              <div style="display: flex; gap: 8px; margin-top: 8px;">
                <NInput 
                  :value="downloadPath" 
                  readonly 
                  placeholder="选择下载路径"
                  style="flex: 1;"
                />
                <NButton type="primary" @click="selectDownloadPath">
                  选择
                </NButton>
              </div>
              <NText depth="3" style="font-size: 12px; margin-top: 4px; display: block;">
                视频会自动创建以合集标题命名的文件夹
              </NText>
            </div>
            
            <div>
              <NButton 
                type="info" 
                block 
                @click="openDownloadFolder"
              >
                <template #icon>
                  <NIcon>
                    <FolderOpenOutline />
                  </NIcon>
                </template>
                打开下载文件夹
              </NButton>
            </div>
          </div>
        </NSpace>
      </NDrawerContent>
    </NDrawer>
    
    <div class="header-section">
      <div class="logo-area">
        <div class="bilibili-logo">
          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <!-- bilibili 哔哩哔哩 logo -->
            <g fill="#00A1D6">
              <!-- 左耳朵 -->
              <rect x="40" y="30" width="15" height="35" rx="7.5"/>
              <!-- 右耳朵 -->
              <rect x="145" y="30" width="15" height="35" rx="7.5"/>
              <!-- 主体 -->
              <rect x="35" y="60" width="130" height="90" rx="20"/>
              <!-- 左眼 -->
              <circle cx="75" cy="100" r="12" fill="white"/>
              <!-- 右眼 -->
              <circle cx="125" cy="100" r="12" fill="white"/>
              <!-- 嘴巴 -->
              <path d="M 80 125 Q 100 135 120 125" stroke="white" stroke-width="6" fill="none" stroke-linecap="round"/>
            </g>
          </svg>
        </div>
        <div class="title-text">
          <h1>B站视频下载器</h1>
          <p class="subtitle">⚡ Mars Blibli - 基于 Tauri + Vue + Rust 开发 ⚡</p>
        </div>
      </div>
    </div>

    <NCard class="main-card" :bordered="false">
      <NSpace vertical :size="20">
        <!-- 下载路径提示 -->
<!--        <NAlert v-if="downloadPath" type="info" :bordered="false" class="download-alert">-->
<!--          <template #icon>-->
<!--            <NIcon :component="FolderOpenOutline" />-->
<!--          </template>-->
<!--          <span style="color: white;">视频将保存到: {{ downloadPath }}</span>-->
<!--          <template #action>-->
<!--            <NSpace>-->
<!--              <NButton text @click="selectDownloadPath" style="color: white;">-->
<!--                选择路径-->
<!--              </NButton>-->
<!--              <NButton text @click="openDownloadFolder" style="color: white;">-->
<!--                <template #icon>-->
<!--                  <NIcon :component="FolderOpenOutline" />-->
<!--                </template>-->
<!--                打开文件夹-->
<!--              </NButton>-->
<!--            </NSpace>-->
<!--          </template>-->
<!--        </NAlert>-->
        <div class="input-section">
          <NInput
            v-model:value="videoUrl"
            type="text"
            placeholder="请输入B站视频链接，例如：https://www.bilibili.com/video/BVxxxxxxxxx"
            size="large"
            clearable
            @keyup.enter="parseVideo"
            class="video-url-input"
          >
            <template #prefix>
              <NIcon :component="PlayOutline" style="color: #999;" />
            </template>
          </NInput>
          <NButton 
            type="primary" 
            size="large"
            :loading="loading"
            @click="parseVideo"
            :disabled="!videoUrl.trim()"
          >
            {{ loading ? '解析中...' : '解析视频' }}
          </NButton>
        </div>

        <div v-if="loading" class="loading-section">
          <NSpin size="large" />
          <NText depth="3" style="margin-top: 16px; color: white;">正在解析视频信息...</NText>
        </div>

        <div v-if="videos.length > 0 && !loading" class="video-list-section">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
            <NText strong style="font-size: 18px; color: white;">
              找到 {{ videos.length }} 个视频
            </NText>
            <NSpace>
              <NButton 
                v-if="isDownloading || isPaused"
                :type="isPaused && !isDownloading ? 'success' : 'warning'"
                @click="togglePause"
              >
                <template #icon>
                  <NIcon>
                    <component :is="isPaused && !isDownloading ? PlayCircleOutline : PauseOutline" />
                  </NIcon>
                </template>
                {{ isPaused && !isDownloading ? '继续下载' : '暂停下载' }}
              </NButton>
              <NButton 
                type="primary" 
                @click="batchDownload"
                :disabled="isDownloading"
                :loading="isDownloading"
              >
                <template #icon>
                  <NIcon>
                    <CloudDownloadOutline />
                  </NIcon>
                </template>
                {{ isDownloading ? '下载中...' : '批量下载全部' }}
              </NButton>
            </NSpace>
          </div>
          
          <NList bordered class="video-list">
            <NListItem v-for="(video, index) in paginatedVideos" :key="(currentPage - 1) * pageSize + index" class="video-item">
              <div class="video-content">
                <div v-if="video.cover" class="video-cover" style="width: 200px; height: 125px;">
                  <img :src="video.cover" :alt="video.title" />
                </div>
                
                <div class="video-info">
                  <div class="video-title">
                    <span v-if="video.collection_title && videos.length > 1" style="color: rgba(255, 255, 255, 0.6); font-size: 14px;">
                      {{ video.collection_title }} / 
                    </span>
                    {{ video.title }}
                  </div>
                  
                  <NSpace :size="12" style="margin-top: 12px;">
                    <NTag :bordered="false" type="info" size="small">
                      <template #icon>
                        <NIcon :component="PlayOutline" />
                      </template>
                      {{ video.bvid }}
                    </NTag>
                    
                    <NTag v-if="video.duration" :bordered="false" type="default" size="small">
                      <template #icon>
                        <NIcon :component="TimeOutline" />
                      </template>
                      {{ formatDuration(video.duration) }}
                    </NTag>
                    
                    <NTag v-if="video.author" :bordered="false" size="small">
                      UP: {{ video.author }}
                    </NTag>
                  </NSpace>
                  
                  <div v-if="video.desc" class="video-desc">
                    {{ video.desc }}
                  </div>
                  
                  <div class="download-section">
                    <NSpace>
                      <NButton 
                        type="primary"
                        :loading="downloadProgress[(currentPage - 1) * pageSize + index] !== undefined && downloadProgress[(currentPage - 1) * pageSize + index] < 100"
                        @click="downloadVideo(video, (currentPage - 1) * pageSize + index)"
                        :disabled="downloadProgress[(currentPage - 1) * pageSize + index] === 100"
                      >
                        <template #icon>
                          <NIcon>
                            <CloudDownloadOutline />
                          </NIcon>
                        </template>
                        {{ downloadProgress[(currentPage - 1) * pageSize + index] === 100 ? '已下载' : '下载视频' }}
                      </NButton>
                      
                      <NButton 
                        v-if="downloadProgress[(currentPage - 1) * pageSize + index] === 100"
                        @click="openDownloadFolder"
                      >
                        <template #icon>
                          <NIcon>
                            <FolderOpenOutline />
                          </NIcon>
                        </template>
                        打开文件夹
                      </NButton>
                    </NSpace>
                    
                    <NProgress 
                      v-if="downloadProgress[(currentPage - 1) * pageSize + index] !== undefined"
                      type="line"
                      :percentage="downloadProgress[(currentPage - 1) * pageSize + index]"
                      :indicator-placement="'inside'"
                      processing
                      style="margin-top: 12px;"
                    />
                    
                    <NText 
                      v-if="downloadedFiles[(currentPage - 1) * pageSize + index]" 
                      depth="3" 
                      style="font-size: 12px; margin-top: 8px; word-break: break-all; color: rgba(255, 255, 255, 0.7);"
                    >
                      保存位置: {{ downloadedFiles[(currentPage - 1) * pageSize + index] }}
                    </NText>
                  </div>
                </div>
              </div>
            </NListItem>
          </NList>
          
          <!-- 分页 -->
          <div v-if="videos.length > pageSize" class="pagination-section">
            <NPagination
              v-model:page="currentPage"
              :page-count="Math.ceil(videos.length / pageSize)"
              :page-size="pageSize"
              show-size-picker
              :page-sizes="[5, 10, 20, 50]"
              @update:page-size="(size) => { pageSize = size; currentPage = 1; }"
            >
              <template #prefix>
                <NText style="color: white;">共 {{ videos.length }} 个视频</NText>
              </template>
            </NPagination>
          </div>
        </div>

        <div v-if="videos.length === 0 && !loading" class="empty-state">
          <div class="empty-icon">
            <NIcon :size="80" :color="'#00A1D6'">
              <PlayOutline />
            </NIcon>
          </div>
          <NText style="font-size: 16px; color: rgba(255, 255, 255, 0.9); margin-top: 16px; display: block;">
            🎥 暂无视频
          </NText>
          <NText depth="3" style="font-size: 15px; color: rgba(255, 255, 255, 0.7); margin-top: 8px; display: block;">
            💡 输入B站视频链接开始解析
          </NText>
        </div>
      </NSpace>
    </NCard>


  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-y: auto;
}

/* 隐藏滚动条 */
.app-container::-webkit-scrollbar {
  display: none;
}

.app-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.app-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.app-container > * {
  position: relative;
  z-index: 1;
}

.settings-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.settings-button :deep(.n-button) {
  background: rgba(0, 161, 214, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 161, 214, 1);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 161, 214, 0.5);
}

.settings-button :deep(.n-button:hover) {
  background: rgba(0, 161, 214, 1);
  box-shadow: 0 6px 16px rgba(0, 161, 214, 0.7);
}

:deep(.n-drawer) {
  background: rgba(20, 30, 50, 0.95);
  backdrop-filter: blur(20px);
}

:deep(.n-drawer-header) {
  border-bottom: 1px solid rgba(0, 161, 214, 0.3);
  color: white;
}

:deep(.n-drawer-header__main) {
  color: white;
  font-size: 18px;
  font-weight: 700;
}

:deep(.n-drawer-body-content-wrapper) {
  padding: 24px;
}

:deep(.n-drawer .n-text) {
  color: white;
}

:deep(.n-drawer .n-divider) {
  background-color: rgba(0, 161, 214, 0.3);
}

:deep(.n-drawer .n-input-number) {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

:deep(.n-drawer .n-input-number .n-input__input-el) {
  color: white;
}

:deep(.n-drawer .n-input) {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

:deep(.n-drawer .n-input .n-input__input-el) {
  color: white;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.bilibili-logo {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 12px rgba(0, 161, 214, 0.6));
}

.bilibili-logo svg {
  width: 100%;
  height: 100%;
}

.title-text {
  text-align: center;
}

.title-text h1 {
  margin: 0;
  color: white;
  font-size: 42px;
  font-weight: 900;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 2px;
  line-height: 1.2;
}

.title-text .subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0 0 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.main-card {
  width: 100%;
  max-width: 1200px;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: rgba(20, 30, 50, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 161, 214, 0.3);
}

.input-section {
  display: flex;
  gap: 12px;
}

.input-section :deep(.n-input) {
  flex: 1;
  border-radius: 12px !important;
}

.input-section :deep(.n-input .n-input__border) {
  border-radius: 12px !important;
}

.input-section :deep(.n-input .n-input__state-border) {
  border-radius: 12px !important;
}

.video-url-input :deep(input) {
  color: #333 !important;
  font-size: 14px !important;
  caret-color: #333 !important;
  background: white !important;
}

.video-url-input :deep(input::placeholder) {
  color: #999 !important;
}

.input-section :deep(.n-input .n-input__input-el) {
  color: #333 !important;
  caret-color: #333 !important;
}

.input-section :deep(.n-input .n-input__placeholder) {
  color: #999 !important;
}

.input-section :deep(.n-input .n-input-wrapper) {
  background: white;
  border: 1px solid rgba(0, 161, 214, 0.5);
  border-radius: 12px !important;
}

.input-section :deep(.n-input .n-input__border),
.input-section :deep(.n-input .n-input__state-border) {
  border-color: rgba(0, 161, 214, 0.5) !important;
}

.input-section :deep(.n-input:hover .n-input-wrapper) {
  background: white;
  border-color: rgba(0, 161, 214, 0.8);
}

.input-section :deep(.n-input.n-input--focus .n-input-wrapper) {
  background: white;
  border-color: rgba(0, 161, 214, 1) !important;
}

.input-section :deep(.n-input .n-input__clear),
.input-section :deep(.n-input .n-base-clear) {
  color: #999 !important;
}

.input-section :deep(.n-input .n-input__clear:hover),
.input-section :deep(.n-input .n-base-clear:hover) {
  color: #333 !important;
}

.input-section :deep(.n-input .n-base-suffix__arrow) {
  color: #999 !important;
}

.input-section :deep(.n-button) {
  border-radius: 16px;
  font-weight: 700;
  background: rgba(0, 161, 214, 0.8);
  border: 1px solid rgba(0, 161, 214, 1);
}

.input-section :deep(.n-button:hover) {
  background: rgba(0, 161, 214, 1);
}

.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.video-list-section {
  margin-top: 24px;
}

.video-list {
  background: transparent;
  border-color: rgba(0, 161, 214, 0.2);
}

.video-list :deep(.n-list-item) {
  border-color: rgba(0, 161, 214, 0.2);
}

.video-item {
  padding: 20px;
  border-radius: 16px;
}

.video-item:hover {
  background: rgba(0, 161, 214, 0.15);
}

.video-content {
  display: flex;
  gap: 20px;
  width: 100%;
}

.video-cover {
  border-radius: 16px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.video-cover :deep(img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-size: 18px;
  font-weight: 700;
  color: white;
  line-height: 1.5;
  margin-bottom: 8px;
}

.video-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.download-section {
  margin-top: auto;
  padding-top: 16px;
}

.download-section :deep(.n-button) {
  border-radius: 12px;
  font-weight: 600;
  background: rgba(0, 161, 214, 0.8);
  border: 1px solid rgba(0, 161, 214, 1);
  color: white;
}

.download-section :deep(.n-button:not(.n-button--disabled):hover) {
  background: rgba(0, 161, 214, 1);
}

.download-section :deep(.n-progress) {
  border-radius: 8px;
  overflow: hidden;
}

.download-section :deep(.n-progress .n-progress-graph-line-fill) {
  background: linear-gradient(90deg, #00A1D6, #00C9FF);
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0, 161, 214, 0.4));
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding: 20px;
  background: rgba(0, 161, 214, 0.1);
  border-radius: 16px;
}

.pagination-section :deep(.n-pagination) {
  gap: 8px;
}

.pagination-section :deep(.n-pagination-item) {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(0, 161, 214, 0.4) !important;
  color: white !important;
  border-radius: 8px;
}

.pagination-section :deep(.n-pagination-item__button) {
  background: transparent !important;
  color: white !important;
  border: none !important;
}

.pagination-section :deep(.n-pagination-item:not(.n-pagination-item--disabled):hover) {
  background: rgba(0, 161, 214, 0.4) !important;
  border-color: rgba(0, 161, 214, 0.7) !important;
}

.pagination-section :deep(.n-pagination-item--active) {
  background: rgba(0, 161, 214, 0.9) !important;
  border-color: rgba(0, 161, 214, 1) !important;
}

.pagination-section :deep(.n-pagination-item--disabled) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(0, 161, 214, 0.2) !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.pagination-section :deep(.n-pagination-quick-jumper) {
  color: white;
}

.pagination-section :deep(.n-pagination-quick-jumper__input) {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(0, 161, 214, 0.4) !important;
  color: white !important;
  border-radius: 8px;
}

.pagination-section :deep(.n-select) {
  color: white;
}

.pagination-section :deep(.n-base-selection) {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(0, 161, 214, 0.4) !important;
  border-radius: 8px;
}

.pagination-section :deep(.n-base-selection-label) {
  color: white !important;
  background: transparent !important;
}

.pagination-section :deep(.n-base-selection:hover) {
  background: rgba(0, 161, 214, 0.4) !important;
  border-color: rgba(0, 161, 214, 0.7) !important;
}

.pagination-section :deep(.n-base-selection .n-base-selection-label) {
  color: white !important;
}

.pagination-section :deep(.n-base-selection-input__content) {
  color: white !important;
}

.pagination-section :deep(.n-base-suffix .n-base-suffix__arrow) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer {
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tech-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.badge {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: default;
}

:deep(.n-alert) {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 161, 214, 0.3);
  background: rgba(0, 161, 214, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 161, 214, 0.4);
}

.download-alert :deep(.n-alert__icon),
.download-alert :deep(.n-button) {
  color: white !important;
}

:deep(.n-tag) {
  border-radius: 8px;
  font-weight: 600;
  background: rgba(0, 161, 214, 0.3);
  border: 1px solid rgba(0, 161, 214, 0.5);
  color: white;
}

@media (max-width: 768px) {
  .video-content {
    flex-direction: column;
  }
  
  .video-cover {
    width: 100%;
  }
  
  .input-section {
    flex-direction: column;
  }
  
  .title-text h1 {
    font-size: 32px;
  }
  
  .bilibili-logo {
    width: 60px;
    height: 60px;
  }
}
</style>

